<template>
    <div class="todo-header"> 
        <input 
            name="todo" 
            type="text"
            placeholder="please input your todo and press enter"
            v-on:change="onInputTodo($event)" />	
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import TodosService from "./../../services/todos"
import { mapActions } from "vuex"

export default defineComponent({
    setup() {},
    name:"TodosHeader",
    methods:{
        onInputTodo($event:any){            
            // this.todo=$event.target.value;
            // this.$nextTick(()=>{
            //     console.log(this.todo);
            // })
            TodosService.add({
                title:$event.target.value,
                isFinished: false
            }).then((response)=>{
                //console.log(response);    //并不需要处理结果
                this.getTodos();
            });

        },
        getTodos(){
            TodosService.getAllTodos().then((response)=>{                
                this.getAllTodos(response.data.data)
            })
        },
        ...mapActions({
            getAllTodos:"todos/getAllTodos"
        })
    }
})
</script>

<style scoped>
  .todo-header > input{
	width: 579px;height: 28px;font-size: 14px;
	border: 1px solid #ccc;border-radius: 4px;
	padding: 4px 7px;outline: none;
}
.todo-header > input:focus{
	outline: none;
  	border-color: rgba(255, 0, 0, 0.8);
  	box-shadow: inset 0 1px 1px rgba(255, 0, 0, 0.075), 0 0 8px rgba(255, 0, 0, 0.6);
}
</style>
